angular.module(moduleName + '.directives')
  .directive('hrEcharts', ['$http', function($http) {
    return {
      restrict: 'EA',
      templateUrl: 'hr-ehcarts/hr-ehcarts.html',
      replace: true,
      scope: {
        data: '=',
        type: '@'
      },
      link: function(scope, element) {
        scope.isPie = false;
        scope.isLine = false;
        if (scope.type == 'pie') {
          var chart = echarts.init(element[0].firstElementChild);
          scope.isPie = true;
          var chartData = scope.data;
          chart.setOption({
            tooltip: {
              trigger: 'item',
              formatter: "{a} <br/>{b} : {d}%"
            },
            color: chartData.color,
            series: chartData.series,
          })
        } else if (scope.type == "line") {
          var chart = echarts.init(element[0].lastElementChild);
          scope.isLine = true
          var chartData = scope.data;
          chart.setOption({
            tooltip: {
              trigger: 'axis'
            },
            calculable: true,
            grid: {
              x: 15,
              y: 20,
              x2: 15,
              y2: 30
            },
            xAxis: [{
              type: 'category',
              boundaryGap: false,
              splitLine: {
                show: true
              },
              data: chartData.data
            }],
            yAxis: [{
              type: 'value',
              axisLine: {
                show: false
              },
              axisLabel: {
                show: false
              },
              axisTick: {
                show: false
              }
            }],
            series: chartData.series
          })
        }
      }
    }
  }]);
